<style type="text/css">

/*=== 画像の表示エリア === */
.slide {
       position:relative;
       overflow:hidden;
}

/*=== 画像の設定 ===*/
.slide img {
       display : block;
       position : absolute;
             /* 画像のサイズを表示エリアに合せる */
  width      : inherit;
  height     : inherit;
  opacity    : 0;
  animation  : slideAnime 40s ease infinite;
}

 /*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 8s }
.slide img:nth-of-type(3) { animation-delay: 16s }
.slide img:nth-of-type(4) { animation-delay: 24s }
.slide img:nth-of-type(5) { animation-delay: 32s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { opacity: 0; transform: rotateY(90deg) }
   2% { opacity: 1; transform: rotateY(0deg)  }
  12% { opacity: 1; transform: rotateY(0deg)  }
  14% { opacity: 0; transform: rotateY(90deg) }
 100% { opacity: 0; transform: rotateY(90deg) }
}

/*===ヘッド文字のアニメーション========*/
.loading span {
  position: relative;
  display: inline-block;
  margin: 0 -.05em;
  color: rgba(0, 0, 0, .2);
}
.loading span::after {
  position: absolute;
  top: 0;
  left: 0;
  content: attr(data-text);
  color: #660099;
  opacity: 0;
  transform: rotateY(-90deg);
  animation: loading 8s infinite;
}
.loading span:nth-child(2)::after {
  animation-delay: .2s;
}
.loading span:nth-child(3)::after {
  animation-delay: .4s;
}
.loading span:nth-child(4)::after {
  animation-delay: .6s;
}
.loading span:nth-child(5)::after {
  animation-delay: .8s;
}
.loading span:nth-child(6)::after {
  animation-delay: 1s;
}
.loading span:nth-child(7)::after {
  animation-delay: 1.2s;
}
.loading span:nth-child(8)::after {
  animation-delay: 1.4s;
}
.loading span:nth-child(9)::after {
  animation-delay: 1.6s;
}
.loading span:nth-child(10)::after {
  animation-delay: 1.8s;
}
.loading span:nth-child(11)::after {
  animation-delay: 2s;
}
@keyframes loading {
  0%, 75%, 100% {
    transform: rotateY(-90deg);
    opacity: 0;
  }
  25%, 50% {
    transform: rotateY(0);
    opacity: 1;
  }
}

</style>